<template>
    <div class="wrapper">
        <p class="title">首页</p>
    <div>
        <el-col   :md="8" :lg="8" :xl="8">
            <div class="grid-content box1">
                <p class="count">{{this.list.orderCount}}</p>
                <p class="titles"><i class="el-icon-user"></i>用户总数</p>
            </div>
        </el-col>
        <el-col   :md="8" :lg="8" :xl="8">
            <div class="grid-content box2">
                <p class="count">{{this.list.productCount}}</p>
                <p class="titles"><i class="el-icon-s-fold"></i>商品总数</p>
            </div>
        </el-col>
        <el-col :md="8" :lg="8" :xl="8">
            <div class="grid-content box3">
                <p class="count">{{this.list.userCount}}</p>
                <p class="titles"><i class="el-icon-check"></i>订单总数</p>
            </div>
        </el-col>
    </div>
           
        
    </div>
</template>

<script>
  import { home } from "../../../http/index.js"
    export default {
        data() {
            return {
                list:{}
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            async getData(){
                let res =await home();
                this.list=res.data.data
                console.log(res);
            }
        },
    }
</script>

<style lang="scss" scoped>
.wrapper{
    width: 100%;
    
    .title{
        font-size: 36px;
        font-weight: 400;
        padding: 15px;
    }
}
  .el-row {
    margin-left:0;
    margin-right: 0;
    padding: 20px;
  }
  .box1 {
    background: #f0ad4e;
    height: 160px;
  }
  .box2 {
    background: #d3dce6;
    height: 160px;
  }
  .box3 {
    background: #5cb85c;
    height: 160px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    margin: 20px;
    text-align: center;
    color: white;
    
    .count{
        font-size: 50px;
        height: 80px;
        line-height: 80px;
    }
    .titles{
        margin-top: 40px;
    }
  }
  .grid-content:hover{
            opacity: 1;
            text-decoration: none;
            color: #333;
            transform: scale(1.08);
            transition: all .3s;
    }
</style>